<script setup lang="ts">
import { ref } from 'vue';
import useStore from '../store';

const { todos } = useStore();

const content = ref('');
// 注意：这里的 content 拿到的是一个响应式对象，传值传的是具体的值，记得 .value
const addTodos = () => {
  if (!content.value) return alert('不能添加空任务');
  todos.addTodo(content.value);
  content.value = '';
};
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="content" @keydown.enter="addTodos" />
  </header>
</template>

<style lang="less" scoped></style>
